<template>
  <el-container style="margin: auto">
    <el-main>
      <el-header style="margin: auto;height: auto"><h2>已处理反馈产品统计: </h2></el-header>
      <div id="totalContainer" />
      <el-header style="margin: auto;height: auto"><h2>产品物流信息统计: </h2></el-header>
      <div id="weightContainer" />
      <el-header style="margin: auto;height: auto"><h2>产品库存信息统计: </h2></el-header>
      <div id="inContainer" />
    </el-main>
  </el-container>

</template>

<script>
import { Pie, measureTextWidth, Column } from '@antv/g2plot'
import { Bar } from '@antv/g2plot'
import request from '@/request'

export default {
  name: 'EnChart',
  data() {
    return {
      data: [],
      tenantId: ''
    }
  },
  created() {
    this.getCookie('tenantid')
    this.load()
  },
  mounted() {
  },
  methods: {
    getCookie(name) {
      const cookieStr = document.cookie
      const cookies = cookieStr.split('; ')
      for (let i = 0; i < cookies.length; i++) {
        const cookie = cookies[i].split('=')
        if (cookie[0] === name) {
          this.tenantId = cookie[1]
        }
      }
    },
    load() {
      request.get('/readFeedback/chatData', {
        params: {
          tenantId: this.tenantId
        }
      }).then(res => {
        // todo:将拿到的数组按照对象属性value排序
        const newArrByInt = this.dataSortByValue(res.data, 'value')

        // todo:图表渲染
        function renderStatistic(containerWidth, text, style) {
          const textWidth = measureTextWidth(text, style)
          const textHeight = style.lineHeight || style.fontSize
          const R = containerWidth / 2
          // r^2 = (w / 2)^2 + (h - offsetY)^2
          let scale = 1
          if (containerWidth < textWidth) {
            scale = Math.min(Math.sqrt(Math.abs(Math.pow(R, 2) / (Math.pow(textWidth / 2, 2) + Math.pow(textHeight, 2)))), 1)
          }
          const textStyleStr = `width:${containerWidth}px;`
          return `<div style="${textStyleStr};font-size:${scale}em;line-height:${scale < 1 ? 1 : 'inherit'};">${text}</div>`
        }

        const piePlot = new Pie('totalContainer', {
          appendPadding: 10,
          data: newArrByInt,
          angleField: 'value',
          colorField: 'type',
          radius: 1,
          innerRadius: 0.64,
          meta: {
            value: {
              formatter: (v) => `${v} 次`
            }
          },
          label: {
            type: 'inner',
            offset: '-50%',
            style: {
              textAlign: 'center'
            },
            autoRotate: false,
            content: '{value}'
          },
          statistic: {
            title: {
              offsetY: -4,
              customHtml: (container, view, datum) => {
                const { width, height } = container.getBoundingClientRect()
                const d = Math.sqrt(Math.pow(width / 2, 2) + Math.pow(height / 2, 2))
                const text = datum ? datum.type : '总投诉量'
                return renderStatistic(d, text, { fontSize: 28 })
              }
            },
            content: {
              offsetY: 4,
              style: {
                fontSize: '32px'
              },
              customHtml: (container, view, datum, data) => {
                const { width } = container.getBoundingClientRect()

                const text = datum ? ` ${datum.value}次` : ` ${data.reduce((r, d) => r + d.value, 0)}次`
                return renderStatistic(width, text, { fontSize: 32 })
              }
            }
          },
          // 添加 中心统计文本 交互
          interactions: [{ type: 'element-selected' }, { type: 'element-active' }, { type: 'pie-statistic-active' }]
        })

        piePlot.render()
      })
      request.get('/productLog/chatData', {
        params: {
          tenantId: this.tenantId
        }
      }).then(res => {
        // todo:将拿到的数组按照对象属性value排序
        const newArrByInt = this.dataSortByValue(res.data, 'sums')
        // todo:数组属性值改名
        const newJson = this.arrChangeName(newArrByInt, newArrByInt, 'sums', '重量（吨）')
        // todo:生成图表
        const column = new Bar('weightContainer', {
          data: newJson,
          yField: 'id',
          xField: '重量（吨）',
          yAxis: {
            label: {
              autoRotate: false
            }
          },
          scrollbar: {
            type: 'vertical'
          },
          tooltip: {
            fields: ['重量（吨）']
          }
        })
        // todo:渲染图表
        column.render()
      })
      request.get('/productInfo/chatData', {
        params: {
          tenantId: this.tenantId
        }
      }).then(res => {
        // todo:将拿到的数组按照对象属性value排序
        const newArrByInt = this.dataSortByValue(res.data, 'sums')
        // todo:数组属性值改名
        const newJson = this.arrChangeName(newArrByInt, newArrByInt, 'sums', '库存（吨）')
        // todo:生成图表
        const column = new Column('inContainer', {
          data: newJson,
          xField: 'id',
          yField: '库存（吨）',
          xAxis: {
            label: {
              autoRotate: false
            }
          },
          scrollbar: {
            type: 'horizontal'
          }
        })

        column.render()
      })
    }
  }
}

</script>

<style scoped>
h2 {

  font-family: Arial, sans-serif;

  font-size: 24px;

  color: #fff;

  padding: 4px;

  background-color: #696;

}
</style>
